{% extends 'base.html' %}

{% block title %}商品列表 - 花店订单系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="float-start">商品列表</h2>
            <form class="float-end" method="get" action="{% url 'products:product_list' %}">
                <div class="input-group">
                    <input type="text" class="form-control" name="q" value="{{ query }}" 
                           placeholder="搜索商品名称或描述...">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for product in products %}
            <div class="col">
                <div class="card h-100">
                    {% if product.image %}
                        <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.name }}">
                    {% else %}
                        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="默认图片">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text">{{ product.description|truncatewords:20 }}</p>
                        <p class="card-text">
                            <strong>价格：</strong> ¥{{ product.price }}<br>
                            <strong>库存：</strong> {{ product.stock }}
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="{% url 'products:product_detail' product.pk %}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12">
                <div class="alert alert-info">
                    {% if query %}
                        没有找到匹配的商品。<a href="{% url 'products:product_list' %}">查看所有商品</a>
                    {% else %}
                        暂无商品信息
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    /* 搜索框样式 */
    .input-group {
        max-width: 300px;
    }
    
    /* 卡片图片样式 */
    .card-img-top {
        height: 200px;
        object-fit: cover;
    }
    
    /* 卡片标题样式 */
    .card-title {
        font-size: 1.1rem;
        font-weight: bold;
    }
    
    /* 价格样式 */
    .card-text strong {
        color: #0d6efd;
    }
</style>
{% endblock %} 